<template>
	<view class="container">
		<view class="cut"></view>
		<view class="bank">
			<text>提现至:</text>
			<view class="bankNum">
				<text class="bankName">{{bankName?bankName:''}}</text>
				<text class="bankCode">({{bankCode?bankCode:''}})</text>
			</view>
		</view>
		<view class="cut"></view>
		<view class="cell">
			<text>提现金额</text>
			<text class="nowMoney">当前余额 ￥{{cash?cash:''}}</text>
			<image @tap.stop="markTips" class="mark-img" src="/static/images/center/icon/5.png" mode=""></image>
			<text>￥</text>
			<input type="digit" placeholder="请输入提现金额" placeholder-style="font-weight:normal;font-size: 32rpx;" v-model="count"
			 @input="countInput" />
			<view class="all" @tap="all">全部提现</view>
		</view>
		<view class="surplus">
			<text class="a">提现成功后还剩余￥{{surplus}}</text>
			<text class="b" v-if="count">,{{extract_fee}}</text>
		</view>
		<view class="rule">
			<image @tap="ruleCheck" v-if="ruleChecked" src="../../static/images/public/select.png" mode=""></image>
			<view @tap="ruleCheck" class="gray" v-else></view>
			<view class="text"><text>同意</text><text @tap="goRule(14,'免责协议')">《免责协议》</text></view>
		</view>
		<view class="loginBtn" @tap="act&&keyboradShown()" :class="act? 'active' : ''">
			提 现
		</view>
		<newModel ref="newModel" :content="content" confirmText="我知道了"></newModel>
		<passkeyborad :show="keyboradShow" @close="keyboradClose" @finish="finished"></passkeyborad>
	</view>
</template>

<script>
	import {
		checkPassword
	} from "@/api/user.js"
	import {
		sellerApply,
		sellerIndex
	} from '@/api/merchant.js'
	import {
		systemConfig
	} from "@/api/public.js"
	import {
		shellList
	} from "@/api/shell.js"
	import passkeyborad from '@/components/yzc-paykeyboard/yzc-paykeyboard.vue'
	import utils from "@/common/utils.js"
	import newModel from '@/components/new_model/new_model.vue'
	export default {
		components: {
			passkeyborad,
			newModel
		},
		data() {
			return {
				ruleChecked: true,
				bankName: '',
				bankCode: '',
				bankId: '',
				current: 0,
				surplus: 0,
				count: null,
				cash: null,
				act: false,
				keyboradShow: false,
				extract_fee: '', //手续费描述
				withdrawal_rule: {}, //提现手续费规则
				content: [],
			}
		},
		watch: {
			count: {
				deep: true,
				handler(val, oldval) {
					this.blur();
				}
			}
		},
		onLoad(options) {
			this.sellerIndex();
			this.cash = Number(options.money);
			this.surplus = this.cash;
			uni.showLoading({
				mask:true
			})
			shellList().then(res => {
				this.withdrawal_rule = res.data.withdrawal_rule
				this.content = [
					'普惠生活余额提现规则：',
					'1. 针对用户或商户余额提现，提现至对私银行账户金额在' + this.withdrawal_rule.money + '元及以下自动审核、单笔' + this.withdrawal_rule.private_service_fee + '元手续费、自动到账 ，' + this.withdrawal_rule.money + '元以上需人工审核、免手续费；',
					'2. 针对用户或商户余额提现，提现至对公银行账户金额需人工审核、单笔' + this.withdrawal_rule.public_service_fee + '元手续费。'
				]
				uni.hideLoading()
			})
		},
		methods: {
			markTips() {
				this.$refs.newModel.show()
			},
			ruleCheck() {
				this.ruleChecked = !this.ruleChecked
			},
			goRule(id, name) {
				uni.navigateTo({
					url: `/pages/center/help/rulesDetail?id=${id}&tit=${name}`
				})
			},
			countInput(e) {
				this.count = e.detail.value;
			},
			sellerIndex() {
				sellerIndex().then(res => {
					this.bankName = res.data.seller_info.bank_real_name;
					this.bankCode = res.data.seller_info.bank_card_number.slice(-4);
				})
			},
			blur() {
				this.$nextTick(function() {
					this.count = utils.verifyNum(this.count)
					if (Number(this.count) > Number(this.cash)) {
						this.count = String(this.cash)
					}
					this.surplus = String((Number(this.cash) - Number(this.count)).toFixed(2))
					let bank_type = uni.getStorageSync('sellerInfo').bank_type
					if (bank_type == 1) {
						if (Number(this.count) <= Number(this.withdrawal_rule.private_service_fee)) {
							this.extract_fee = "提现金额低于手续费"
							this.act = false
						} else if (this.withdrawal_rule.private_service_fee < this.count&& this.count<= this.withdrawal_rule.money) {
							this.extract_fee = "提现手续费" + this.withdrawal_rule.private_service_fee + "元"
							this.act = true
						} else {
							this.extract_fee = "免手续费"
							this.act = true
						}
					} else if (bank_type == 2) {
						if (Number(this.count) <= Number(this.withdrawal_rule.public_service_fee)) {
							this.extract_fee = "提现金额低于手续费"
							this.act = false
						} else {
							this.extract_fee = "提现手续费" + this.withdrawal_rule.public_service_fee + "元"
							this.act = true
						}
					}
					
				})
			},
			all() {
				this.count = this.cash
			},
			keyboradShown() {
				if (!this.count || this.count == 0) {
					return uni.showToast({
						icon: "none",
						title: "请输入提现金额"
					})
				}
				if (!this.ruleChecked) {
					return uni.showModal({
						content: "请同意《免责协议》",
						confirmColor: "#57BE6A",
						showCancel: false,
						success() {

						}
					})
				}
				this.keyboradShow = true
			},
			keyboradClose() {
				this.keyboradShow = false
			},
			finished(password) {
				checkPassword({
					password: password
				}, this.keyboradClose()).then(res => {
					this.withdraw()
				})
			},
			withdraw() {
				uni.showLoading({
					mask:true
				})
				let item = {
					title: '提现已提交',
					count: this.count,
					bank: this.bankName,
					code: this.bankCode,
					money: this.count
				}
				sellerApply({
					money: this.count,
					extract_type: "bank"
				}).then(res => {
					uni.showToast({
						title: res.msg,
						duration: 1500,
						icon: "none"
					})
					let info = uni.getStorageSync("sellerInfo")
					info.balance = String((Number(info.balance) - Number(this.count)).toFixed(2))
					uni.setStorageSync("sellerInfo", info)
					setTimeout(function() {
						uni.redirectTo({
							url: `/business/wallet/withdrawSuccess?item=${ encodeURIComponent(JSON.stringify(item)) }`
						})
					}, 1500)
				})
			},
			close() {
				this.$refs.popup.close()
			}
		},
		onHide() {
			this.$refs.popup.close()
		}
	};
</script>

<style lang="scss" scoped>
	.cut {
		width: 750rpx;
		height: 24rpx;
		background: rgba(238, 238, 238, 1);
	}

	.bank {
		width: 690rpx;
		height: 130rpx;
		padding: 0 30rpx;
		align-items: center;
		display: flex;
		position: relative;
		justify-content: space-between;

		text:nth-of-type(1) {
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			margin-right: 6rpx;
		}

		.bankNum {
			display: flex;

			.bankName {
				font-size: 26rpx;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
			}

			.bankCode {
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
			}
		}

		.cell-more {
			position: absolute;
			right: 30rpx;
			color: #E5E5E5;
		}
	}

	.cell {
		width: 690rpx;
		height: 50rpx;
		border-bottom: 1rpx solid rgba(220, 220, 220, 1);
		margin-left: 30rpx;
		margin-top: 110rpx;
		padding: 14rpx 0;
		font-size: 32rpx;
		position: relative;

		text:nth-of-type(1) {
			position: absolute;
			top: -60rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
		}
		.mark-img{
			position: absolute;
			top: -60rpx;
			right: 0;
			width: 40rpx;
			height: 40rpx;
		}
		.nowMoney {
			position: absolute;
			top: -56rpx;
			left: 130rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
		}

		text:nth-of-type(3) {
			position: absolute;
			bottom: 20rpx;
			left: 0;
			font-size: 28rpx;
			font-weight: bold;
		}

		input {
			padding-left: 30rpx;
			font-size: 40rpx;
			font-weight: bold;
		}

		.all {
			position: absolute;
			right: 0;
			bottom: 20rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(87, 190, 106, 1);
			z-index: 2;
		}
	}

	.surplus {
		margin-top: 24rpx;
		margin-left: 30rpx;
		font-size: 20rpx;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
	}

	.beyond {
		color: red;
		font-size: 20rpx;
		margin-top: 24rpx;
		margin-left: 30rpx;
		font-weight: 400;

	}

	.loginBtn {
		width: 600rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background: rgba(220, 220, 220, 1);
		margin-left: 75rpx;
		line-height: 80rpx;
		text-align: center;
		margin-top: 30rpx;
		color: #ffffff;
		font-size: 32rpx;
	}


	.active {
		background-color: $theme-color;
	}

	.rule {
		margin-top: 100rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			margin-right: 14rpx;
			width: 40rpx;
			height: 40rpx;
			border-radius: 20rpx;
		}

		.gray {
			margin-right: 14rpx;
			box-sizing: border-box;
			border: 2rpx #999 solid;
			width: 40rpx;
			height: 40rpx;
			border-radius: 20rpx;
		}

		.text {
			font-size: 24rpx;
			color: #333;

			text:nth-of-type(2) {
				color: $theme-color;
			}
		}
	}
</style>
